PurPal: Cat Nutrition
App Case study
Sylvia Boamah
The product:
PurPal is an app by a subscription cat food
vendor that allows users to track their cat’s
health, find healthy cat food alternatives
for sale, and understand their ingredients.
Project overview
Project duration:
October 2022 –February 2023
The problem:
Cat owners lack information and
resources, outside of vet visits, on the
nutritional value of the cat food they
purchase on a regular basis.
Project overview
The goal:
Design a nutrition tracking app for a
subscription cat food vendor.
My role:
Lead UX designer and UX researcher
Project overview
Responsibilities:
–Conduct research
–Create wireframes and prototypes
–Conduct usability studies
Understanding
the user
●User research
●Personas
●Problem statements
●User journey maps
User research: summary
I started conducting my research by recruiting cat owners within my social media circle to interview.
These cat owners spanned different demographics between age, gender, and ethnic background. I
held ~15 minutes interviews over the phone with permission to record the calls for notetaking.
I had the assumption that cat owners would have a better idea of what was in their cat’s food
because of regular vet visits and cat food purchase. From my findings, it was apparent that most
cat owners had no clue what their companion was eating. It was important for me to find out why
and how to help better communicate nutrition on a regular basis.
Research goals:
-I want to understand the emotions and motivations behind cat care.
-I want to understand frustrations when buying cat food, especially for nutrition.
-I want to understand the process for getting or subscribing to cat food.
User research: pain points
Lack of knowledge
Cat owners do not know
about cat food
ingredients, and
veterinarians may not
relay that information
clearly.
Lack of transparency
The most popular cat
brands do not prioritize
health but rather taste,
lacking transparency in
what’s really in cat food.
Price vs. Health
Cat owners think the
healthier options are the
most expensive, making
them have to choose
between price and
health. This is not
equitable to lower
income cat owners.
Tracking
Cat owners find it hard
to track the meals and
the purchases of food
for their cat or multiple
cats.
1 2 3 4
Persona: Marium
Problem statement:
Marium is a busy mom and
evolving professional who needs a
quick and visually accessible way
to research and purchase healthy
cat food biweekly because she
lacks the time to prioritize her
cat’s health.
Persona: AJ
Problem statement:
A J is an undergraduate student
with a part-time job who needs a
balance between buying a monthly
supply of healthy yet cheap cat
food options because they are
unsure how to find out if the
brands financially accessible to
them are the healthiest.
Persona: Dave
Problem statement:
Dave is a professor and car fosterer
who needs to provide each of his
cats with the right meals for their
health conditions daily because it is
hard to track those meals and their
nurtitional value on his own.
User journey map: Marium
Image of user
journey map
The goal for Marium was to buy a
month supply of cat food. My thought
process was to start with the normal
flow of going to the store and making a
purchase. Then, I factored in what
would spark emotion through that
process for busy individual with a
visual impairment like
farsightedness. This took research on
the condition and empathizing with
long wait times and difficult font sizes.
From this, I was able to conclude on
improvements for her current
process.
User journey map: A J
Image of user
journey map
The goal for AJ was also to buy a
month supply of cat food. My thought
process was remained the same, to
start with the normal flow of going to
the store and making a purchase.
However, I factored in their lack of
knowledge on cat nutrition and the
worry someone with lower income
would have about pricing. This took
researching price dissatisfaction and
empathizing a way to alleivate that
stress. From this, I was able to
conclude on improvements for their
current process.
User journey map: Dave
Image of user
journey map
Dave has the same goal as the other
personas. My thought process was
remained the same, to start with the
normal flow of going to the store and
making a purchase. However, I
factored in the stress of having
multiple cats. This took empathizing
ways to differentiate the needs of each
cat. From this, I was able to conclude
on improvements for his current
process.
●Paper wireframes
●Digital wireframes
●Low-fidelity prototype
●Usability studies
Starting
the design
Paper wireframes
My goal was to create and
refine the initial layouts of the
application. I explored various
possible layouts that best
communicate each desired
screen, including a brainstorm
of the contents in the
homepage and cat profile. The
following paper prototypes are
of the refined screens.
Paper wireframes of the Homepage
Digital wireframes:
Product Screen
Based on interviews, users want
transparency when it comes to ingredients.
The goal of the product screen is to list
ingredients, display candid descriptions
about health benefits and drawbacks, and
allow users to purchase products from the
app. Icon indicators, such as thumbs up and
thumbs down, are commonly known and can
concisely communicate healthy vs unhealthy
ingredients when accompanied with color.
Users will be guided to a traditional checkout
flow once they click “Add to Cart”.
Dropdown
for more
information
on each
ingredient
Icon indicators
of healthy
versus
unhealthy
ingredients
Button for
adding
products to
cart
Digital wireframes:
Cat Profile
The goals of the Cat Profile screen
is to host important information
about the user’s cat(s). Based on
interviews, users want to be able to
track their cat’s meals and changes
within their cat’s diet, weight, and
growth. Users would be able to add
and edit meals, update their cat’s
information (such as weight, age,
and length), and be notified of
changes with the assistance of data
visualization.
Dropdown that
allows users to
view and add
multiple cats.
Meals section
to add and
track wet and
dry meals.
Statistics
section to
notify users of
changes with
their cat.
Usability study: findings
I conducted two (2) remote, moderated usability study with
five (5) participants, the first with the low-fidelity prototype
and the second with the high-fidelity prototype. The
participants are all cat owners between the ages of 21 and 75
who are employed with the desire to be health conscious.
Users were asked to complete five (5) tasks using a low
fidelity prototype and fill out a System Usability Scale.
I split my observations into six themes using an affinity
diagram:
1. Convenient elements
2. Elements that caused confusion
3. Emotions
4. Elements that were clear
5. Places where the app can establish trust
6. Other considerations in design
People want products accessible on
the homepage, especially trusted
products.
Supporting evidence from the usability study
●4 out of 5 participants did not know that
products were accessible from the
homepage with the “Health Rankings”
label.
●1 out of 5 participants wants input from
vets on the products somewhere on the
application.
I changed the section title from Health Rankings
to Vet Recommended Products for where vet-
trusted products can be visible on the home
screen. I also added the source of the Tip of the
Day so users can trust the app’s content.
BEFORE AFTER
People want a quick
reordering process.
Supporting evidence from the
usability study
●2 out of 5 participants found
that the reordering process had
too many steps.
●1 out of 5 participants
specifically expressed
frustration with refilling the
checkout flow.
I added a modal for quick reordering
that shows the card information and
shipping address. I also added the
option to change your payment
information which redirects to the
regular checkout flow.
BEFORE AFTER
The pencil icon is not clear
enough for some people in
representing an edit feature.
Supporting evidence from the usability
study
●2 out of 5 participants had trouble
finding how to edit their cat’s
meals.
●2 out of 5 participants clicked on
other buttons on the Cat Profile to
edit meals before or instead of the
pencil.
I changed the Edit Meal icon to a button
with the icon and supporting text.
BEFORE AFTER
Usability study: findings (cont.)
Round 1 findings
3
4
Round 2 findings
Users need ways to trust the app.
1
Users need clear indicators on what
features do.
2
Users need accessible language
that accompanies abstract icons.
Users want a faster reordering
process.
1Users need a receipt as order
confirmation.
Users need to know what’s being
reordered.
2
●Mockups
●High-fidelity prototype
●Accessibility
Refining
the design
Mockups: Order
Confirmation
The order confirmation is not
specific enough.
Supported evidence from usability study.
•4 out of 5 participants wanted a confirmation
receipt with an order summary.
•3 out of 5 participants felt uncomfortable with
the lack of information about their order.
I changed the confirmation modal to an entire
page with an order summary.
BEFORE AFTER
People want to know what
product they’re
reordering.
Supporting evidence from the
usability study
●3 out of 5 participants found
that the reordering popup too
vague to trust.
I added an image and product
information to the Reorder Now
modal.
BEFORE AFTER
Key Mockups
Homepage Orders Screen Products Screen Cat Profile
Key Mockups (cont.)
CheckoutProduct Screen
Accessibility considerations
High color contrast
Users need color
contrasts that comply
with WCAG standards for
color and readability.
Use of text
Users need icons with
labels wherever necessary
to indicate their
functionality, especially in
the menu and in buttons.
Screen reader
compatibility
Users need the app to be
compatible with screen
readers. This includes
focusing on text and
layout heirarchy.
1 2 3
●Takeaways
●Next steps
Going forward
Takeaways
Impact:
"I like that it shows what your cat eats and
when. I think it's nice that instead of just the
ingredients, it breaks it down to what it is.
That's convenient if you want to show your vet
for any reason.“ – Participant E
What I learned:
I learned the importance of user centricity.
Focusing on every possible end user creates
impactful design. Everyone deserves to be
represented in all aspects of design and the
product lifecycle.
Next steps
Registration/Log-in
Flow
This application will
require some research on
what the best registration
flow will be since the user
is making two (2)
separate profiles.
Expanding Cat Stats
capabilities and sharing
feature
I want to research what
users would want to learn
about their cat. The app
can be a one-stop-shop
for their cat’s information
and statistics could be
shared to their vets.
Price vs Health
Comparison feature and
Rewards System
For users who want the
healthiest food within
their budget would have a
comparison feature to
find a satisfactory
compromise. Then, users
will get rewards for
buying healthy food.
1 2 3
Thank you!
